<template>
  <div class="subscribe-record">
    <div class="form-container">
      <el-form :model="form" ref="form" size="medium" label-width="85px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="消息标题" prop="personName">
              <el-input
                style="width: 100%"
                type="text"
                v-model="form.title"
                clearable
                placeholder="请输入消息标题"
                @keyup.enter.native="handleSearch"
                @clear="handleSearch"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="推送时间" prop="consultantName">
              <el-date-picker
                style="width: 100%"
                v-model="form.pushTime"
                :picker-options="pickerOptions"
                :clearable="false"
                type="daterange"
                range-separator="-"
                valueFormat="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleSearch"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="推送类型">
              <el-select
                style="width: 100%"
                v-model="form.subscribeId"
                placeholder="请选择推送类型"
                clearable
                @change="handleSearch"
              >
                <el-option
                  v-for="item in pushTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="阅读状态">
              <el-select
                style="width: 100%"
                v-model="form.isRead"
                placeholder="请选择阅读状态"
                clearable
                @change="handleSearch"
              >
                <el-option
                  v-for="item in readStatusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label-width="20px">
              <el-button type="primary" size="small" @click="handleSearch"
                >筛选</el-button
              >
              <el-button @click="handleReset" size="small">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="list-container">
      <el-table
        ref="multipleTable"
        :data="recordList"
        style="width: 100%"
        v-loading="tableLoading"
        tooltip-effect="dark"
        max-height="490"
      >
        <el-table-column
          label="消息标题"
          prop="title"
          show-overflow-tooltip
          min-width="200"
        >
          <template slot-scope="scope">{{ scope.row.title || "-" }}</template>
        </el-table-column>
        <el-table-column
          prop="subscribeId"
          label="推送类型"
          show-overflow-tooltip
          min-width="80"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.subscribeId === 1 ? "职讯" : "职位" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="推送时间"
          show-overflow-tooltip
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="isRead"
          label="状态"
          show-overflow-tooltip
          min-width="60"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.isRead === 1 ? "已读" : "未读" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="careerId"
          label="操作"
          fixed="right"
          min-width="60"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="handleRemove(scope.row)"
              >撤回</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pager" v-if="recordList.length > 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="page.sums"
        background
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { subscribeManageSearch, subscribeDelete } from "@/api/index";
import page from "@/mixin/page";
export default {
  mixins: [page],
  data() {
    return {
      recordList: [],
      tableLoading: false,
      form: {
        title: "",
        subscribeId: "", // 推送类型
        pushTime: "", // 推送时间
        isRead: "", // 阅读状态
      },
      pushTypeOptions: [
        { label: "全部", value: "" },
        { label: "职讯", value: 1 },
        { label: "职位", value: 2 },
      ],
      readStatusOptions: [
        { label: "全部", value: "" },
        { label: "未读", value: 0 },
        { label: "已读", value: 1 },
      ],
      pickerOptions() {
        return {
          disabledDate(time) {
            const date1 = new Date("2023-09-01");
            const date2 = new Date(
              new Date().getFullYear() +
                "-" +
                ("0" + (new Date().getMonth() + 1)).substr(-2) +
                "-" +
                ("0" + new Date().getDate()).substr(-2)
            );
            const diff = date2 - date1 + 60 * 60 * 24 * 1000;
            return (
              time.getTime() < Date.now() - diff || Date.now() < time.getTime()
            );
          },
        };
      },
    };
  },
  props: {
    selectedRow: {
      type: Object,
      default: () => {},
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    handleRemove(row) {
      this.$confirm("此操作将撤回本次推送, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const params = {
            id: row.id,
          };
          subscribeDelete(params).then((res) => {
            if (res.code === 200) {
              this.getData();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "success",
                message: "删除失败!",
              });
            }
          });
        })
        .catch(() => {});
    },
    handleSearch() {
      this.page.currentPage = 1;
      this.getData();
    },
    handleReset() {
      this.form.title = "";
      this.form.subscribeId = "";
      this.form.pushTime = "";
      this.form.isRead = "";
      this.handleSearch();
    },
    getData() {
      this.tableLoading = true;
      const params = {
        personId: this.selectedRow.personId,
        title: this.form.title,
        subscribeId: this.form.subscribeId,
        isRead: this.form.isRead,
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize,
        startTime:
          Array.isArray(this.form.pushTime) && this.form.pushTime.length > 1
            ? this.form.pushTime[0] + " 00:00:00"
            : "",
        endTime:
          Array.isArray(this.form.pushTime) && this.form.pushTime.length > 1
            ? this.form.pushTime[1] + " 23:59:59"
            : "",
      };
      subscribeManageSearch(params)
        .then((res) => {
          if (res.code === 200) {
            this.recordList = res.data;
            this.page.sums = res.pageparam.sums;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-col-12 {
  width: 50%;
}
.subscribe-record {
  padding: 14px 14px 0 0;
  .list-container {
    margin-top: 12px;
  }
}
</style>
